﻿@model IEnumerable<Kooboo.CMS.Content.Models.CategoryFolder>
@{
    Layout = ViewBag.Layout ?? "~/Views/Shared/EditorTemplates/_TR.cshtml";

    var categoryJson = Newtonsoft.Json.JsonConvert.SerializeObject(new Kooboo.CMS.Content.Models.CategoryFolder());
    var modelJson = Model != null ? Newtonsoft.Json.JsonConvert.SerializeObject(Model) : "[]";
}

<div id="categories" class="category-list">
    <ul data-bind="foreach: data">
        <li>
            @Html.DropDownList("FolderName", ViewData.ModelMetadata.GetDataSource()
                            .GetSelectListItems(ViewContext.RequestContext), new RouteValueDictionary()
                            .Merge("data-bind", "value:FolderName, attr: {name: $parent.getPrefixFieldName($index()) + 'FolderName'}"))
            <input type="checkbox" name="SingleChoice" value="True" data-bind="checked:SingleChoice, attr: {name: $parent.getPrefixFieldName($index()) + 'SingleChoice'}" />
            <label class="inline">@("Single choice".Localize())</label>
            <input type="hidden" name="SingleChoice" value="False" data-bind="attr: {name: $parent.getPrefixFieldName($index()) + 'SingleChoice'}" />
            <a class="action right" data-bind="click: $parent.removeItem">@Html.IconImage("minus")</a>
        </li>
    </ul>
    <a class="action" data-bind="click: $data.addItem">@Html.IconImage("plus")</a>
</div>
<script type="text/javascript">
    $(function () {
        function CategoriesViewModel() {
            var self = this;

            self.data = ko.observableArray(@Html.Raw(modelJson));

            self.addItem = function () {
                self.data.push(@Html.Raw(categoryJson));
            };

            self.removeItem = function () {
                self.data.remove(this);
            };

            var namePrfix = 'Categories';
            self.getPrefixFieldName = function (index) {
                return namePrfix + '[' + (index) + '].';
            };
        }
        ko.applyBindings(new CategoriesViewModel(), $("#categories")[0]);
    });
</script>
